﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#bind-to-data-asynchronously">
    <CodeSnippetTabPage Text="Razor">@(@"<DxDataGrid DataAsync=""@ForecastService.GetForecastAsync""
            PageSize=""5""
            RowRemovingAsync=""@OnRowRemoving""
            RowUpdatingAsync=""@OnRowUpdating""
            RowInsertingAsync=""@OnRowInserting""
            CssClass=""mw-1100"">
    <DxDataGridCommandColumn Width=""150px"" />
    <DxDataGridDateEditColumn Field=""@nameof(WeatherForecast.Date)"" DisplayFormat=""D"" EditorFormat=""D"" />
    <DxDataGridColumn Field=""@nameof(WeatherForecast.Forecast)"" Caption=""Forecast"" Width=""150px"" />
    <DxDataGridSpinEditColumn Field=""@nameof(WeatherForecast.TemperatureC)"" Caption=""@(""Temp. (\x2103)"")""
                              TextAlignment=""DataGridTextAlign.Left"" Width=""150px"" />
    <DxDataGridComboBoxColumn Field=""@nameof(WeatherForecast.CloudCover)"" Caption=""Cloud Cover"" DataAsync=""@ForecastService.GetCloudCoverAsync""
                              TextAlignment=""DataGridTextAlign.Left"" Width=""150px"" />
    <DxDataGridCheckBoxColumn Field=""@nameof(WeatherForecast.Precipitation)"" Caption=""Precipitation"" Width=""100px"" />
</DxDataGrid>
@code {

    [Inject] protected WeatherForecastService ForecastService { get; set; }
    [Inject] protected IJSRuntime JSRuntime { get; set; }

    async Task OnRowRemoving(WeatherForecast dataItem) {
        bool approved = await JSRuntime.InvokeAsync<bool>(""confirm"", ""Are you sure you want to delete this record?"");
        if (approved)
            await ForecastService.Remove(dataItem);
    }
    async Task OnRowUpdating(WeatherForecast dataItem, IDictionary<string, object> newValue) {
        await Task.Delay(2000);
        await ForecastService.Update(dataItem, newValue);
    }
    async Task OnRowInserting(IDictionary<string, object> newValue) {
        await Task.Delay(2000);
        await ForecastService.Insert(newValue);
    }
}")</CodeSnippetTabPage>
</CodeSnippetTabbed>
